﻿@{
    ViewData["Title"] = "人脸比对";
}
<div class="layui-layout layui-layout-admin">
    <div class="layui-card">
        <div class="layui-card-header" id="num">人脸比对</div>
        <div class="layui-card-body">
            <div class="layui-bg-gray">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">原图</div>
                            <div class="layui-card-body">
                                <div class="layui-upload-drag" style="display: block;height:280px" id="ID-upload-demo-dragA">
                                    <i class="layui-icon layui-icon-upload"></i>
                                    <div>点击上传，或将文件拖拽到此处</div>
                                    <div class="layui-hide" id="ID-upload-demo-previewA">
                                        <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">对比图</div>
                            <div class="layui-card-body">
                                <div class="layui-upload-drag" style="display: block;height:280px" id="ID-upload-demo-dragB">
                                    <i class="layui-icon layui-icon-upload"></i>
                                    <div>点击上传，或将文件拖拽到此处</div>
                                    <div class="layui-hide" id="ID-upload-demo-previewB">
                                        <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-padding-3">
                            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                                <i class="layui-icon layui-icon-upload"></i> 开始比对
                            </button>
                            <div class="layui-margin-3"></div>
                            <div class="layui-font-20" id="result">匹配度：80%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        var app = {
            faceA: {},
            faceB: {}
        };
        layui.use(['tools', 'toast', 'http'], function () {
            var $ = layui.$, upload = layui.upload, 
                http = layui.http,
                toast = layui.toast;
            
            app.initUpload = function (uploadId, previewId) {
                app.uploadIns = upload.render({
                    elem: '#' + uploadId,
                    auto: false,
                    accept: 'file',
                    choose: function (obj) {
                        // 预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#' + previewId).removeClass('layui-hide').find('img').attr('src', result);
                            //
                            var data = {
                                "image_type": result.split(',')[1],
                                "display_corp_image": 1
                            };
                            if (uploadId == 'ID-upload-demo-dragA')
                                app.faceA = data;
                            else
                                app.faceB = data;
                        });
                    }
                });
            }
            //
            app.upload = function () {
                var data = {
                    faceA:app.faceA,
                    faceB: app.faceB
                }
                http.post('/api/face/match', data).then((res) => {
                    $('#result').html('匹配度：' + (res.result.score*100) + '%');
                })
            }
            app.init = function () {
                app.initUpload('ID-upload-demo-dragA', 'ID-upload-demo-previewA', app.faceA);
                app.initUpload('ID-upload-demo-dragB', 'ID-upload-demo-previewB', app.faceB);
                $('#ID-upload-demo-btn').on('click', app.upload);
            }();
        })
    </script>
}
